<!--报警配置-->
<template>
  <div class="main">
    <div class="info-container">
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" class="demo" v-loading="loading">
          <el-form-item label="站房名称">
            {{ item.stationId }}
          </el-form-item>
          <el-form-item label="报警名称">
            {{ item.ruleId }}
          </el-form-item>
          <el-form-item label="报警通道">
            {{getChannels(item.channels)}}
          </el-form-item>
          <el-form-item label="用户组">
            {{item.userGroupsName}}
          </el-form-item>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { list, confAdd, confUpdate } from '@/api/operation/alarmRule/index';
import { listGroup, getGroup } from '@/api/system/group/index';
import { listStation } from '@/api/station/index';

import common from '@/utils/common.ts';

export default {
  props: {
    data: {}
  },
  computed: {
    timeRange: {
      get() {
        return this.item.timeRange / 3600;
      },
      set(value) {
        this.item.timeRange = value * 3600;
      }
    }
  },
  data() {
    return {
      loading: false,
      enabled: [
        { label: '停用', value: '0' },
        { label: '启用', value: '1' }
      ],
      channels: [
        { label: '告警短信', value: 'SMS' },
        { label: '站内信息', value: 'WEBSOCKET' },
        { label: '钉钉群机器人通知', value: 'DINGTALK' },
        { label: '告警邮件', value: 'MAIL' }
      ],

      item: {},
      stations: [],
      groups: [],
      rules: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(data) {
      if (data == null) this.item = this.data;
      else this.item = data;

      let userGroups = '';
      this.item.userGroupVos.forEach((v) => {
        userGroups += v.groupName + ',';
      });
      this.item.userGroupsName = userGroups;

      //this.getGroup();
    },

    getGroup() {
      getGroup(this.item.userGroups).then((res) => {
        if (res.code == 200) {
          this.item.userGroupsName = res.data.groupName;
        }
      });
    },

    /**
     * 获取用户组列表
     * @param name
     */
    queryAlarmRuleList(name) {
      list({ ruleName: name }).then((res) => {
        if (res.code == 200) {
          this.rules = res.rows;
        }
      });
    },

    /**
     * 获取用户组列表
     * @param name
     */
    queryGroupList(name) {
      listGroup({ groupName: name }).then((res) => {
        if (res.code == 200) {
          this.groups = res.rows;
        }
      });
    },

    /**
     * 获取站房列表
     */
    queryStationList(name) {
      listStation({ name: name }).then((res) => {
        if (res.code == 200) {
          this.stations = res.rows;
        }
      });
    },

    handleCancel() {
      this.$emit('hideRight');
    },

    getChannels(channels) {
      if (channels == null) return '';
      let items = channels.split(',');
      let str = '';
      items.forEach((v) => {
        if (v != '') str += this.marchType(v, this.channels) + ', ';
      });
      return str;
    },

    /**
     * 匹配结果
     */
    marchType(value, types) {
      for (let i = 0; i < types.length; i++) {
        let type = types[i];
        if (type.value == value) return type.label;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;

  .contentFrm {
    padding: 10px;
    background: #f6f7fb;
  }

  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }

  .el-input-number {
    width: 100%;
  }
}
</style>